<template>
  <div>
<!--    v-for="(item,index) in $store.state.lunbotuList" :key="index" v-if="$store.state.lunbotuList"-->
    <van-swipe :autoplay="3000" :stop-propagation="false" :show-indicators="false">
      <van-swipe-item v-for="(item,index) in $store.state.lunbotuList" :key="index" v-if="$store.state.lunbotuList">
        <div class="img_100 xd">
          <img @click="addList(item)"
               @touchstart="touart"
               @touchmove="touove"
               @dragstart.prevent :src="$store.state.imageUrltitle+item.image" height="360"/>
          <div class="jd wh_max wz_white pad_5 wh_f" style="left: 0;bottom: 5px;background: rgba(0, 0, 0, .4);">
            <div class="centerdq flex_9">
              <div class="hh ccsl_1" style="height: 20px">
                <span class="mag_l-10">
                  {{item.title}}
                </span>
              </div>
            </div>
            <div class="centerdq flex_1">{{ index+1}}  / {{$store.state.lunbotuList.length}}</div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import {getArticle} from "@/api/api";

export default {
  name: "Carousel",
  data(){
    return {
      // 鼠标点击状态
      clickFlag:true
  }
  },
  create() {
  },
  methods:{
    // 点击事件
    addList(e){
      // 判断我的鼠标状态是点击还是拖动 再进行跳转
      if(this.clickFlag){
        let listid = e.id
        this.$router.push({
          path:'listIndex',
          query:{
            listid
          }
        })
      }else{
      }
    },
    touart(){
      this.clickFlag = true
    },
    touove(){
      this.clickFlag = false
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
/*轮播图*/
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 360px;
  text-align: center;
  background-color: #39a9ed;
}
img{
  /*pointer-events: none;*/
  /*-moz-user-select: none;*/
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*{
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>